<template>
	<view>
		<view class="xq-img">
			<image class="xqpic" :src="data.picture"></image>
		</view>
		<view class="anquan">
			<view :class="'xq-title fontsize'+fontsizedetail" >{{data.title}}</view>
			<view  :class="'xq-otr fontsize'+fontsizedetail">
				发布时间：{{data.updateTime}}
			</view>
			<view :class="'xq-cont fontsize'+fontsizedetail">
				<rich-text :nodes="data.content"></rich-text>
			</view>
		</view>
		<view class="boot">
			<view class="fonts bootchild" @click="showfont">字体</view>
			<view class="shoucang bootchild">收藏</view>
			<view class="sharebtn bootchild" @click="showshare">分享</view>
		</view>
		<view class="font" v-show="isshowfont">
			<detailFontsize v-on:closefont="closefont"></detailFontsize>
		</view>
		<view class="share" v-show="isshowshare">
			<view class="sharebox">
				<view class="sharetodo" @click="sharewx('WXSceneSession')">微信</view>
				<view class="sharetodo" @click="sharewx('WXSenceTimeline')">微信朋友圈</view>
			</view>
			<view class="close" @click="closeshare">关闭</view>
		</view>
	</view>
</template>

<script>
	import {common} from '@/common/publish.js';
	import {mapState,mapMutations} from 'vuex';
	import detailFontsize from '@/components/detail-fontsize/detail-fontsize.vue';
	export default {
		components:{
			detailFontsize
		},
		data() {
			return {
				type:'',
				id:'',
				data:{},
				isshowfont:false,
				isshowshare:false,
				href:''
			};
		},
		onLoad(event) {
			if(event.type=='lession'){
				this.lession(event.id)
			}else if(event.type == 'project'){
				this.project(event.id)
			}else if(event.type == 'projectlist'){
				this.projectlist(event.id)
			}
		},
		methods: {
			//课程
			lession:function(id){
				uni.request({
					url: common.localurl+'/api/topic/topic.json', 
					data:{topicId:id},
					method:'GET',
					dataType:'json',
					success: (res) => {
						this.data = res.data.data;
						this.data.updateTime = common.format(this.data.updateTime)
						var href = common.localurl+'/api/lessionList.htm?'+ id;
						this.abouttitle(this,href)
					}
				});
			},
			//项目详情
			project:function(id){
				uni.request({
					url: common.localurl+'/api/project/project.json', 
					data:{projectId:id},
					method:'GET',
					dataType:'json',
					success: (res) => {
						this.data = res.data.data.project;
						this.data.updateTime = common.format(this.data.updateTime)
						this.data.picture = this.data.contentpicture;
						var href = common.localurl+'/api/proDetail.htm?type=0&id='+id
						this.abouttitle(this,href)
					}
				});
			},
			//项目动态详情
			projectlist:function(id){
				uni.request({
					url: common.localurl+'/api/project/projectDynamic.json', 
					data:{projectDynamicId:id},
					method:'GET',
					dataType:'json',
					success: (res) => {
						this.data = res.data;
						this.data.updateTime = common.format(this.data.updateTime)
						var href=common.localurl+'/api/proDetail.htm?type=1&id='+id
						this.abouttitle(this,href)
					}
				});
			},
			abouttitle:function(that,href){
				that.href = href
				uni.setNavigationBarTitle({
					title: that.data.title
				});
			},
			sharewx(who){
				var that = this;
				uni.getProvider({
					service: 'share',
					success: function (res) {
						console.log(JSON.stringify(res));
						if (~res.provider.indexOf('weixin')) {
							uni.share({
								provider: "weixin",
								scene: who,
								type: 0,
								href: that.href,
								title: '教育之弦',
								summary: that.data.title,
								imageUrl: common.localurl+"/assets/front/image/jyzxlogo.jpg",
								success: function (res) {
									console.log("success:" + JSON.stringify(res));
									that.isshowshare =false;
								},
								fail: function (err) {
									console.log("fail:" + JSON.stringify(err));
								}
							});
						}
					}
				});
				
			},
			closefont(){
				this.isshowfont =false;
			},
			showfont(){
				this.isshowfont =true;
			},
			closeshare(){
				this.isshowshare =false;
			},
			showshare(){
				this.isshowshare =true;
			}
		},
		computed:{
			...mapState(['fontsizedetail'])
		}
	}
</script>

<style lang="scss">
	@import '@/common/publish.scss';
	@include fontsizefn(".xq-title",36upx);
	@include fontsizefn(".xq-otr",30upx);
	@include fontsizefn(".xq-cont",36upx);
	page{
		background-color: $bgcolor;
	}
	.xq-img{
		width:750upx;
	}
	.xqpic{
		width:100%;
	}
	.anquan{
		padding:0 24upx;
	}
	.xq-title{
		line-height:60upx;
		color:$titlecolor;
	}
	.xq-otr{
		color:$timecolor;
		line-height:50upx;
	}
	.xq-cont{
		margin-bottom:80upx;
	}
	.boot{
		position:fixed;
		left:0;
		bottom:0;
		width:750upx;
		height:120upx;
		display: flex;
		flex-direction:row;
		flex-wrap:nowrap ;
		justify-content:space-between;
		align-items:flex-start;
		line-height:120upx;
		background-color:#fff;
		border-top:1px solid #fbfbfb;
		z-index:10;
	}
	.bootchild{
		text-align:center;
		width:33.3%;
	}
	.share{
		position:fixed;
		left:0;
		bottom:0;
		height:300upx;
		width:750upx;
		background-color:#fff;
		border-top:1px solid #fbfbfb;
		z-index:11;
	}
	.sharebox{
		width:100%;
	}
	.sharetodo{
		width:750upx;
		height:100upx;
		line-height:100upx;
		font-size:32upx;
		color:$fontblue;
		text-align: center;
		border-bottom:1px solid #ccc;
	}
</style>
